<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [{

            label: "用户名",

            name: "username",

            type: "text"

        }, {

            label: "密码",

            name: "password",

            type: "password"

        }, {

            label: "性别",

            name: "gender",

            type: "select",

            value: ['男', '女', '不男', '不女', 'Gay', '妖王']

        }, {

            label: "爱好",

            name: "hobby",

            type: "checkbox",

            value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

        }, {

            label: '是否已婚',

            name: 'married',

            type: 'radio',

            value: ['已婚', '未婚']

        },
        {

            label: '简介',

            name: 'resume',

            type: 'textarea'

        }];
        var bd = document.querySelector('body');
        var js = document.querySelector('script')
        arr.forEach(function (cur, index) {
            var lab = document.createElement('lable');
            lab.setAttribute("name", cur.name);
            // lab.setAttribute("type",cur.type);
            lab.innerText = cur.label;
            bd.insertBefore(lab, js);
            if (cur.type === 'select') {
                var sel = document.createElement('select');
                for (var i = 0; i < cur.value.length; i++) {
                    var opt = document.createElement('option');
                    opt.setAttribute("value", cur.value[i]);
                    opt.innerText = cur.value[i];
                    sel.appendChild(opt);
                }
                bd.insertBefore(sel, js);
                var br= document.createElement('br');
                bd.insertBefore(br, js);
            }
            else if (cur.type === 'textarea') {
                var textarea = document.createElement('textarea');
                bd.insertBefore(textarea, js);
                var br= document.createElement('br');
                bd.insertBefore(br, js);
            }
            else {

                if (cur.type === "text" || cur.type === "password") {
                    var input = document.createElement('input');
                    input.setAttribute("type", cur.type);
                    bd.insertBefore(input, js);
                    var br= document.createElement('br');
                    bd.insertBefore(br, js);
                }
                else if (cur.type === "checkbox" || cur.type === "radio") {

                    cur.value.forEach(function (curv, index) {
                        var input = document.createElement('input');
                        input.setAttribute('type', cur.type);
                        input.setAttribute('value', cur.value[index]);
                        var span = document.createElement('span');
                        span.style.fontSize = '16pxb'
                        span.innerText = cur.value[index];
                        bd.insertBefore(input, js)
                        bd.insertBefore(span, js)


                    })
                    var br= document.createElement('br');
                    bd.insertBefore(br, js);


                }
            }
        })
    </script>
</body>

</html>